<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-link style="width: 8%;" @click="gocom()"> 返回商品管理</el-link>
			<div style="width: 100%;"><p style="text-align: center;">{{data.a}}</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		<el-card >
			<div style="width: 100%;">
				<div style="display: flex;">
				<div style="margin-top: 10rem;margin-left: 25rem;">
					<el-image v-if="data.com.comid!=0" style="width: 10rem;height: 10rem;"
						:src="$ip+`/public/shows/`+data.com.pic" />
				</div>
				<div>
				<el-main>
					<h2 style="text-align: center;">{{data.a}}</h2>
					<div style="margin-left: 15rem;">
						<el-form :model="data.com" :rules="rules" ref="formRef">
							<el-form-item  label="商品编号:" prop="comid">
							      <el-input v-model="data.com.comid" placeholder="商品编号" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
							    </el-form-item>
							<el-form-item label="商品名称:" prop="comname">
								<el-input v-model="data.com.comname" placeholder="商品名称" :prefix-icon="Cellphone" style="width: 16rem;" />
							</el-form-item>
							<el-form-item label="商品序号:" prop="comsn">
								<el-input v-model="data.com.comsn" placeholder="商品序号" :prefix-icon="Cellphone" style="width: 16rem;" />
							</el-form-item>
							<el-form-item label="商品价格:" prop="price">
								<el-input v-model="data.com.price" placeholder="商品价格" :prefix-icon="Cellphone" style="width: 16rem;" />
							</el-form-item>
							<el-form-item label="商品类型:" prop="type.typeid">
								<el-select v-model="data.com.type.typeid" placeholder="商品类型" style="width: 255px">
									<el-option v-for="item in data.type" :label="item.typename" :value="item.typeid"/>
								</el-select>
							</el-form-item>
							<el-form-item label="制造商:" prop="makers">
								<el-input v-model="data.com.makers" placeholder="制造商" :prefix-icon="Cellphone" style="width: 17rem;" />
							</el-form-item>
							<el-form-item label="商品库存:" prop="stock">
								<el-input v-model="data.com.stock" placeholder="库存" :prefix-icon="Cellphone" style="width: 16rem;" />
							</el-form-item>
							<el-form-item label="生产日期:" prop="tmake">
								
								<el-date-picker
								  v-model="data.com.tmake"
								  type="date"
								  placeholder="生产日期"
								  format="YYYY-MM-DD"
								  style="width: 16rem;"
								>
								 
								</el-date-picker>
							</el-form-item>
							<el-form-item label="商品详情:" prop="info">
								<el-input
								    v-model="data.com.info"
								    style="width: 16rem"
								    :rows="3"
								    type="textarea"
								    placeholder="商品详情"
									:prefix-icon="UserFilled"
								  />
							</el-form-item>
							<el-form-item label="商品图片:" prop="pic" style="width: 30rem;">
								<el-upload class="avatar-uploader" :auto-upload="false" list-type="picture" :show-file-list="true"
									 :limit="1" :on-change="onChangeFile" :on-remove="onRemoveFile">
									<img v-if="imgUrl" :src="imgUrl" class="avatar" style="width: 10%;height: 10%;" />
										<el-icon v-else class="avatar-uploader-icon" >
											<h4 style="text-align: center;">点击上传头像</h4>
										</el-icon>
								</el-upload>
								
							</el-form-item>
						</el-form>
						<el-button  @click="add()" style="background-color: #E1337F;  margin-left: 6rem;color: #FFFFFF;">{{data.a}}</el-button>
						</div>
				</el-main>
				</div>
				</div>
			</div>
		</el-card>
		
		
		
		
	</div>
</template>
<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen,UserFilled} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		const route =useRoute()
		const imgUrl = ref(''); //定义单个响应式变量
		const fd = new FormData();
		const data=reactive({
			com:{comid:0,comname:"",comsn:"",price:0,makers:"",stock:0,info:"",type:{typeid:""},pic:"",tmake:""},
			a:"添加商品",
			type:[]
		})		
		
		function gocom(){
			
			router.push("/mer/mercom")
		}
		
		function add(){
		if(data.com.comname==""||data.com.comsn==""||data.com.makers==""||data.com.info==""||data.com.type.typeid==""||data.com.tmake==""){
			errors(data.a+"信息不允许为空")
			return
		}
		fd.append("comid",data.com.comid)
		fd.append("comname",data.com.comname)
		fd.append("comsn",data.com.comsn)
		fd.append("price",data.com.price)
		fd.append("type.typeid",data.com.type.typeid)
		fd.append("makers",data.com.makers)
		fd.append("stock",data.com.stock)
		fd.append("info",data.com.info)
		// fd.append("tmake",new Date(data.com.tmake).toISOString().slice(0, 19).replace('T', 'T'))
		fd.append("tmake",new Date(data.com.tmake).toISOString().slice(0, 19))
			let s="/mer/com/add"
			if(data.com.comid!=0)s="/mer/com/update"
			$postf(s,fd).then((read)=>{
				success(read.data.msg)
				router.push("/mer/mercom")
			})
			
			
		}
		function onChangeFile(file, fileList) {
			console.log("onChangeFile....")
			console.log(fileList) //打印出数组
			const maxSize = 500 * 1024; // 500kb
			if (file.size > maxSize) {
			  errors('文件大小不能超过 500kb');
			  return;
			}
			if (fileList.length > 0) {
				console.log(fileList[0]);
				// fileList[0].raw;  就是文件内容
				imgUrl.value = URL.createObjectURL(fileList[0].raw)
				// fd.append("img", fileList[0].raw)
				console.log(fileList[0].raw)
				fd.append("img", fileList[0].raw)
			}
		}
		function onRemoveFile(file, fileList) {
			imgUrl.value=""
			
			
			}
		onMounted(()=>{
			let s=route.query.comid
			if(s==undefined){
				$get("/mer/com/findByAddAll").then((read)=>{
					data.type=read.data.data.type
				})
			}else{
				data.a="更改商品"
				$get("/mer/com/findByAddAllId/"+s).then((read)=>{
					data.type=read.data.data.type
					data.com=read.data.data.com
				})
				
				
			}
			
			
		})
</script>

<style>
.demo-datetime-picker-icon {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker-icon .block {
  padding: 30px 0;
  text-align: center;
}
.line {
  width: 1px;
  background-color: var(--el-border-color);
}
</style>
